body.index {
  header .container,
  footer .container {
    @include breakpoint($max-width) {
      margin-left: auto;
      margin-right: auto;
    }
  }
  .content {
    margin: 0 auto;
    max-width: 100%;
  }
}

.vertical {
  /* Internet Explorer 10 */
  display: -ms-flexbox;
  -ms-flex-pack: center;
  -ms-flex-align: center;

  /* Firefox */
  display: -moz-box;
  -moz-box-pack: center;
  -moz-box-align: center;

  /* Safari, Opera, and Chrome */
  display: -webkit-box;
  -webkit-box-pack: center;
  -webkit-box-align: center;

  /* W3C */
  display: box;
  box-pack: center;
  box-align: center;
}

body.index .header-block {
  @include span(4);
  
  background-size: cover;
  position: relative;
  padding-left: 0;
  padding-right: 0;
  height: auto;

  .carousel-block {
    @include span(4);
    display: block;
    padding: 0;
    line-height: 0;

    .carousel-inner {
      line-height: $base-line-height;

      height: auto;
      
      img {
        height: auto;
        width: 100%;
        margin: 0 auto;
        vertical-align: middle;
      }

      .slot-1, .slot-2, .slot-3, .slot-4 {
        width: 100%;
        height: 41.1vw;
        text-align: center;
        background-size: cover;
      }

      .slot-1 {
        background-image: url('/img/assets/index/carousel/slot1-buy-codio.svg');
      }

      .slot-2 {
        background-image: url('/img/assets/index/carousel/slot2-codio-at-coventry-university.jpg');
      }

      .slot-3 {
        background-image: url('/img/assets/index/carousel/slot3-lms-integration.svg');
      }

      .slot-4 {
        background-image: url('/img/assets/index/carousel/slot4-teach-data-science.svg');
      }

      .title-text {
        text-align: center;
        margin: 0 auto;
        padding-top: 6%;
        width: 70%;
        color: #fff;

        .button-large {
          padding: 15px 35px;
          font-size: 1.8vw;
        }

        h2 {
          font-size: 5vw;
          font-weight: 400;
        }

        h3 {
          margin-top: 1rem;
          padding-top: 0;
          padding-bottom: 2.5%;
          font-size: 2.5vw;
          font-weight: 400;
        }

        @include breakpoint($break-tablet) {
          padding-top: 9%;
          h3 {
            padding-top: 1%;
            padding-bottom: 5%;
          }
        }
      }
    }

    .carousel-control.left, .carousel-control.right {
      background-image: none;
      background-repeat: no-repeat;
      text-shadow: none;
    }

    .carousel-indicators .active {
      background-color: #2980b9;
    }

    .carousel-control {
      width: 0;
    }


    .carousel-control.left span {
      margin: 0;
    }

    .carousel-control.right span {
      margin: 0;
    }

    .carousel-control .glyphicon-chevron-left, 
    .carousel-control .glyphicon-chevron-right, 
    .carousel-control .icon-prev, 
    .carousel-control .icon-next {
      position: absolute;
      top: 45%;
      z-index: 5;
      display: inline-block;
    }

    .carousel-control .glyphicon-chevron-left:before {
      content: "\276E";
      display:block;
      width:30px;
      height:30px;
    }

    .carousel-control .glyphicon-chevron-right:before {
      content: "\276F";
      display:block;
      width:30px;
      height:30px;
    }
  }
}

.index-content {
  @include container;
  @include break;
  @include span(4);
  padding-top: 1 * $base-line-height;
  height: 100%;

  .description-block {
    padding-top: 0;

    h4 {
      margin-bottom: 1.5rem;
    }
  }

  @include breakpoint($break-tablet) {
    @include container(14 of 16);
    width: span(14 of 16);
    margin: 0 auto;
    float: inherit;
    max-width: $max-width;
  }

  .index-section-video {
    padding-bottom: 1 * $base-line-height;

    .h_iframe {
      position: relative;

      .ratio {
        display: block;
        width: 100%;
        background: $dark-gray;
        opacity: 0;
        height: auto;
      }

      iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }
    }
  }

  .index-section-scope {
    padding: $base-line-height 0;
    text-align: center;

    h3 {
      font-size: 24px;
      font-weight: 400;
    }

    .scope-item {
      display: inline-block;
      vertical-align: top;
      min-height: 305px;
      width: 100%;
      margin-top: $base-line-height;

      .scope-img {
        width: 100%;
        height: 60px;
        margin-top: auto;
        vertical-align: bottom;

        svg {
          vertical-align: bottom;
          height: 100%;
          width: auto;
        }
      }

      .scope-txt {
        min-height: 135px;
      }      

      .scope-button {
        vertical-align: bottom;
      }

      .button {
        display: inline-block;
        color: $dark-gray;
        border: none;
        width: 100%;
        height: auto;
        padding: 0;
        background-color: $light-gray;
      }

      .button-large {
        padding: 0 auto;
      }

      .button:hover {
        color: white;
        background-color: $light-gray;
      }

      @include breakpoint($break-tablet) {
        width: 33%;
        min-width: 310px;
        margin-left: auto;
        height: 100%;

        &:first-child {
          margin-left: 0;
        }
      }
    }
  }

  .index-section-partners {
    text-align: center;
    padding: 1 * $base-line-height 0;

    h2 {
      font-size: 24px;
      font-weight: 400;
    }

    @include breakpoint($break-tablet) {
      width: span(16 of 16);
    }
  }

  .index-section-partners-img {
    @include container;
    margin-top: 2 * $base-line-height;

    img {
      display: block;
      width: auto;
      margin: 4rem auto;
      vertical-align: middle;

      @include breakpoint($break-tablet) {
        margin: 0;
        margin-left: 10%;
        display: inline;

        &:first-child {
          margin-left: 0;
        }
      }
    }
  }
}

.index-section-testimonials {
  @include container;
  @include break;
  @include span(4);
  padding: 0;
  margin: 0;
  line-height: 0;
  padding: $base-line-height 0;

  .testimonial-block {
    display: inline-block;
    vertical-align: top;
    width: 100%;
    height: auto;
    float: none;

    @include breakpoint($max-width) {
      width: 50%;
      height: 24.1vw;
      float: left;
    }

    @include breakpoint(1388px) {
      height: 335px;
    }

    &.img img {
      width: 100%;
      height: 100%;
    }

    &.text {
      text-align: center;
      font-size: 18px;

      p {
        line-height: 1.5 * $base-line-height;
      }

      .button {
        border: none;
        background: none;
        color: #666;

        &:hover {
          color: #000;
        }
      }

      .txt-quotes {
        font-size: 16px;
        font-style: italic;
      }

      .txt-right, .txt-left {
        padding-top: 5%;

      }

      .txt-right {
        padding-right: 5%;
        padding-left: 5%;
      }

      .txt-left {
        padding-left: 5%;
        padding-right: 5%;
        color: #fff;
      }
    }
  }

  .light-theme {
    background-color: $lighter-gray;
  }

  .dark-theme {
    background-color: $dark-gray;
    color: #fff;
  }
}
